<template>
  <div>
    <h1>在线聊天</h1>
    <video :src="url" ></video>
    <el-input v-model="token"  ></el-input>
    <el-radio  v-model="role" label="user">用户</el-radio>
    <el-radio  v-model="role" label="helper">客服</el-radio>

<!--    v-if="role=='helper'"-->
    <ul v-if="role==='helper'" >
      <li v-for="user in onlineUser" :key="user" >{{user}}</li>
    </ul>
<!--    v-if="role=='user'"-->
    <ul v-if="role==='user'" >
      <li v-for="helper in onlineHelper" :key="helper"  >{{helper}}</li>
    </ul>


    <el-input
      v-model="sendMsg"
      type="textarea"
      :rows="2"
      placeholder="请输入内容"
    >
    </el-input>
    <el-button @click="sendMessage" >发送消息</el-button>

  </div>
</template>
<script>
import {getList,register} from '@/api/health.js'
import axios from "axios";
export default {
  data(){
    return{
      websocket:null,
      onlineUser:[],
      onlineHelper:[],
      role:'user',
      token:'',
      record:'',
      sendMsg:'',
      url:'http://txbl.yjs1906wyx.xyz/live/wyx.m3u8'
    }
  },
  watch:{
    token(token){
      this.changeToken(token)
    }
  },
  mounted() {

  },
  methods:{
    sendMessage(){

    },
    changeToken(token){
      this.websocket=new WebSocket('ws://localhost:7080/xinxinchat?token='+token)
      //客户端收到消息
      this.websocket.onmessage = e=>{
        console.log('e',e)
        const msg=JSON.parse(e.data)

        //online
        this[msg.type](msg.data)

      }

    },chat(){

    },online(data){
      console.log('online',data)
      if(data.roles=='user'){
        this.onlineUser.push(data.username)
      }else if(data.roles=='helper'){
        this.onlineHelper.push(data.username)
      }

    },offline(){

    },onlineList(data){
      console.log(data)
      if(data.key=='OnlineUser'){
        this.onlineUser=data.list
      }else if(data.key=='OnlineHelper'){
        this.onlineHelper=data.list
      }
    }

  }
}
</script>
<style>

</style>
